import { log } from "console";
import { ElButton } from "element-plus";
import { defineComponent, ref } from "vue";
import Pagination from "~/src/components/Pagination";
import SelectMzjf from "~/src/components/SelectMzjf";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';

interface ItemInfo {
    id: string;
    title: string;
    money: string;
}
export default defineComponent({
    setup() {
        const id1 = ref(-1)
        const je = ref()
        const jeArr = ref(["200", "500", "1000", "2000"])
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080
        const datas =[
            {id:1, title: "CT", money: "200"},
            {id:2, title: "血常规", money: "500"},
            {id:3, title: "X光", money: "1000"},
            {id:4, title: "MRI", money: "2000"},
            {id:5, title: "尿常规", money: "500"},
            {id:6, title: "甲功", money: "1000"},
            {id:7, title: "超声", money: "2000"},
            {id:8, title: "体温", money: "500"},
            {id:9, title: "心电图", money: "500"},
            {id:10, title: "血压", money: "1000"},
        ]
        const showDatas = ref<ItemInfo[]>([])
        const handlePageChange = (Datas:any) => {
            showDatas.value = Datas;
        };
        return () =><> <div class={Style.top}>
            <UserInfo></UserInfo>
            <Steps></Steps>
            <div class={Style.container_mar} >
                <div class={Style.body}>
                    <div>
                        {
                            showDatas.value.map((item) => {
                                return   <SelectMzjf style={{marginTop:"28px", }}
                                                     id={item.id}
                                                     title={item.title}
                                                     money={item.money}
                                ></SelectMzjf>

                            })

                        }
                    </div>
                </div>
                <Pagination
                    style={{marginTop: "20px",  padding: "0 64px" ,marginBottom:"10px",}}
                    pageSize={4}
                    Data={datas}
                    onPageChange={handlePageChange}
                ></Pagination>
                <div class={Style.body}>
                    <SelectMzjf style={{marginTop:"28px"}}  >{{
                        btn: () => {
                            return <div class="mainZyyjBtn_zy">
                                <ElButton class={[Style.zyyjbtn]} type="success">去支付</ElButton>
                            </div>
                        }
                    }}</SelectMzjf>
                </div>



            </div>

        </div></>
    }
})
